<template>
<div class="dashboard-container">
    <div class="app-container">
      <!-- 卡片 -->
      <el-card shadow="never">
        <!-- 头部 -->
        <div class="header">
          <div class="left">
              <span>{{$t('randoms.keywords')}}</span>
              <el-input v-model="input" :placeholder="$t('randoms.SearchNumber')" class="input"></el-input>
          </div>
          <div class="right">
             <el-button size="small" @click="purge">{{$t('randoms.reset')}}</el-button>
            <el-button type="primary" size="small" @click="search">{{$t('randoms.search')}}</el-button>
          </div>
        </div>
        <!-- 提示信息 -->
        <el-alert type="info" :closable='false' show-icon>
          <template #title>
           <label>数据一共 {{total}} 条</label>
          </template>
        </el-alert>
        <!-- 表单 -->
          <el-table :data="tableData" style="width: 100%" :header-cell-style='tableHeaderColor' >
              <el-table-column prop="id" :label="$t('randoms.number')"> </el-table-column>
              <el-table-column prop="questionType" :label="$t('randoms.question')" width="100" :formatter="formatter">
              </el-table-column>
              <el-table-column prop="questionIDs" :label="$t('randoms.Titlenumber')">
                <template #default='{row}'>
                  <div v-for="(item,index) in row.questionIDs" :key="index">
                    <a href="#" style="color: rgb(0, 153, 255);" @click="preview(item.id)">{{item.number}}</a>
                    <!-- <a href="#" style="color: rgb(0, 153, 255);" @click="preview(row.questionIDs)">{{identifier(row.questionIDs)}}</a> -->
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="addTime" :label="$t('randoms.Entrytime')"> </el-table-column>
              <el-table-column prop="totalSeconds" :label="$t('randoms.Answertime')"> </el-table-column>
              <el-table-column prop="accuracyRate" :label="$t('randoms.accuracy')"></el-table-column>
              <el-table-column prop="userName" :label="$t('randoms.Enterperson')"> </el-table-column>
              <el-table-column  :label="$t('randoms.operate')" width="80">
                <template #default='{row}'>
                  <el-button type="danger" icon="el-icon-delete" circle @click="delRandoms(row.id)" style="color:#f56c6c;background:#fef0f0;border-color: #fbc4c4;"></el-button>
                </template>
              </el-table-column>
          </el-table>
        <!-- 分页 -->
         <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page"
            :page-sizes="[20, 30, 50, 100]"
            :page-size="pagesize"
            layout="prev, pager, next, sizes, jumper"
            background
            :total="total"
            class="pagination"
            >
        </el-pagination>
        <!-- 弹窗 -->
        <el-dialog :title="$t('randoms.TitlePreview')" :visible="dialogVisible" width="48%" @close='showDialog' :close-on-click-modal='false'>
          <div>
            <el-row>
              <el-col :span="6">【{{$t('randoms.question')}}】： {{questionPattern(list.questionType)}}</el-col>
              <el-col :span="6">【{{$t('randoms.number')}}】： {{list.id}}</el-col>
              <el-col :span="6">【{{$t('randoms.difficulty')}}】： {{difficultyPattern(list.difficulty)}}</el-col>
              <el-col :span="6">【{{$t('randoms.pag')}}】： {{list.tags}}</el-col>
            </el-row>
            <el-row>
              <el-col :span="6">【{{$t('randoms.subject')}}】：{{list.subjectName}}</el-col>
              <el-col :span="6">【{{$t('randoms.catalogue')}}】：{{list.directoryName}}</el-col>
              <el-col :span="6">【{{$t('randoms.direction')}}】：{{list.direction}}</el-col>
              <el-col :span="6"></el-col>
            </el-row>
          </div>
          <hr>
          <div>
            【{{$t('randoms.questionStem')}}】：
            <div style="color:blue" v-html="list.question"></div>
            <div v-if="checkList.length>1">
              <p>{{$t('randoms.multipleChoice')}}</p>
              <el-checkbox-group v-model="checkList" v-for="item in list.options" :key='item.id'>
                <el-checkbox :label="item.title"></el-checkbox>
              </el-checkbox-group>
             </div>
             <div v-else-if="checkList.length === 1">
              <p>{{$t('randoms.singleChoice')}}</p>
              <el-radio-group v-model="radio" v-for="item in list.options" :key='item.id' style="display:block;padding:8px 0">
                  <el-radio :label="item.title"></el-radio>
                </el-radio-group>
             </div>
             <div v-else></div>
          </div>
          <hr>
          <div>
            【{{$t('randoms.readSthforReference')}}】：<el-button type="danger" @click="videoRandoms">{{$t('randoms.VideoAnswerPreview')}}</el-button>
            <video :src="list.videoURL" controls v-if="videoButton" style="display:block;margin-top:5px"></video>
          </div>
          <hr>
          <div>
            【{{$t('randoms.AnswerAnalysis')}}】：<p style="display:inline-block" v-html="list.answer"></p>
          </div>
          <hr>
          <div>
            【{{$t('randoms.TitleRemarks')}}】：{{list.remarks}}
          </div>
          <div style="display:flex;justify-content:flex-end;height:66px">
            <el-button type="primary" style="margin-right: 20px;margin-top:30px" @click="showDialog">{{$t('randoms.shut')}}</el-button>
          </div>
        </el-dialog>
      </el-card>
    </div>
  </div>
</template>

<script>
import { randoms as randomsListApi, removeRandoms as removeRandomsListApi, detail as detailListApi } from '@/api/hmmm/questions'
import { questionType, difficulty } from '@/api/hmmm/constants'
export default {
  data () {
    return {
      input: '',
      tableData: [],
      page: 1,
      pagesize: 10,
      total: 0,
      keyword: '',
      dialogVisible: false,
      checkList: [],
      obj: {},
      list: {},
      radio: '',
      videoButton: false
    }
  },
  created () {
    this.randomsList()
  },
  methods: {
    // 控制视频的显示与隐藏
    videoRandoms () {
      this.videoButton = !this.videoButton
    },
    // 难度格式处理
    difficultyPattern (date) {
      const res = difficulty.find(item => item.value === date)
      if (res) {
        return res.label
      }
    },
    // 题型格式处理
    questionPattern (date) {
      const res = questionType.find(item => item.value === date)
      if (res) {
        return res.label
      }
    },
    // 关闭弹窗
    showDialog () {
      this.dialogVisible = false
      this.videoButton = false
    },
    // 预览
    async preview (id) {
      this.dialogVisible = true
      const { data } = await detailListApi({ id })
      this.list = data
      this.checkList = data.options.filter((item) => {
        return item.isRight === 1
      })
      this.checkList = this.checkList.map((item) => {
        this.radio = item.title
        return item.title
      })
    },
    // 删除
    delRandoms (id) {
      this.$confirm('此操作将永久删除该题组, 是否继续?', '提示', { type: 'warning' }).then(async () => {
        await removeRandomsListApi({ id })
        this.$message.success('删除成功')
        if (this.keyword !== '') {
          this.search()
        } else {
          this.randomsList()
        }
      }).catch(() => {})
    },
    // 页容量
    handleSizeChange (val) {
      this.pagesize = val
      this.page = 1
      if (this.keyword !== '') {
        this.search()
      } else {
        this.randomsList()
      }
    },
    // 页码
    handleCurrentChange (val) {
      this.page = val
      if (this.keyword !== '') {
        this.search()
      } else {
        this.randomsList()
      }
    },
    // 清除
    purge () {
      this.input = ''
      this.page = 1
      this.randomsList()
    },
    // 关键字搜索
    async search () {
      this.keyword = this.input
      const { data } = await randomsListApi({ keyword: this.keyword, page: this.page, pagesize: this.pagesize })
      this.tableData = data.items
      this.total = data.counts
    },
    // 处理题型格式
    formatter (row, column, cellValue, index) {
      const res = questionType.find(item => item.value === cellValue)
      if (res) {
        return res.label
      }
    },
    // 获取组题列表
    async randomsList () {
      const { data } = await randomsListApi({ page: this.page, pagesize: this.pagesize })
      this.tableData = data.items
      this.total = data.counts
    },
    // 设置表头单元格的回调方法
    tableHeaderColor ({ row, column, rowIndex, columnIndex }) {
      return 'background-color:#fafafa;border-bottom:2px solid #e8e8e8'
    }
  }
}
</script>

<style scoped lang='scss'>
.header{
  height: 51px;
  display: flex;
  justify-content: space-between;
}
span{
  display: inline-block;
  padding-right: 12px;
  font-size: 14px;
  color: #606266;
  font-weight: 700;
  width: 80px;
  height: 32px;
  line-height: 32px;
  text-align: right;
}
.input{
  width: 335px;
  height: 32px;
  font-size: 13px;
}
.app-container{
  padding: 0 10px;
  margin: 10px 0;
}
.pagination{
    display: flex;
    justify-content:  flex-end;
    margin-top: 20px;
  }
  ::v-deep .el-alert{
    margin-bottom: 15px;
  }
  ::v-deep .el-input__inner{
    height: 32px;
  }
  ::v-deep .el-pagination__jump{
    margin-left: 0;
  }
  ::v-deep .el-col{
    width: 215px;
    height: 36px;
    padding: 10px 0;
  }
  ::v-deep .el-checkbox{
    display: block;
    height: 35px;
    padding: 8px 0;
  }
</style>
